<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		    div {
		        margin: auto;
		    }
		    
		    #d1 {
		        border: 8px ridge;
		        border-color: black gray gray black;
		        width: 400px;
		        height: 550px;
		        text-align: center;
		    }
		    
		    h3 {
		        width: 350px;
		        background: darkgray;
		        margin: 30px auto;
		    }
		    
		    p {
		        font-weight: bolder;
		        background: darkgray;
		        width: 350px;
		        margin: 20px auto;
		    }
		</style>
		<script type="text/javascript">
		    var db, request, objectStore;
		
		    function $(id) {
		        return document.getElementById(id);
		    }
		
		    function createDB(dbName) {
		        request = indexedDB.open(dbName, 1);
		        request.onerror = function() {
		            alert("打开数据库失败！" + event.target.errorCode);
		        }
		        request.onsuccess = function(event) {
		            alert("打开数据库成功！");
		            db = event.target.result;
		            var transaction = db.transaction("phone", "readwrite");
		            objectStore = transaction.objectStore("phone");
		        }
		        request.onupgradeneeded = function(event) {
		            alert("版本已经发生改变！");
		            db = event.target.result;
		            objectStore = db.createObjectStore("phone", {
		                keyPath: "name"
		            });
		            indexNo = objectStore.createIndex("by_name", "name", {
		                unique: true
		            });
		        }
		    }
		
		    createDB('phoneInfo');
		
		    function ResetInfo() {
		        $("nam").value = "";
		        $("pnum").value = "";
		    }
		
		    function AddInfo() {
		        var addname = $("nam").value;
		        var addphone = $("pnum").value;
		        if (addname.length > 0 && addphone.length > 0) {
		            var detail = {
		                name: addname,
		                phone: addphone
		            }
		            if (!db) {
		                alert("数据库打开失败！");
		                return false;
		            }
		            var transaction = db.transaction(["phone"], "readwrite");
		            objectStore = transaction.objectStore("phone");
		            objectStore.add(detail);
		            alert("信息添加成功！");
		            ResetInfo();
		            var txtAear = $("t1");
		            txtAear.innerHTML = "姓名          电话\n";
		            var store = db.transaction("phone").objectStore("phone");
		            var keyRange = IDBKeyRange.lowerBound(0);
		            var cursorRequest = store.openCursor(keyRange);
		            cursorRequest.onsuccess = function(e) {
		                var result = e.target.result;
		                if (!!result == false)
		                    return;
		                getOneObject(result.value);
		                result.continue();
		            };
		        } else {
		            alert("请输入姓名和电话！");
		            $("nam").focus();
		        }
		    }
		
		    function FindInfo() {
		        var txtAear = $("t1");
		        txtAear.innerHTML = "姓名          电话\n";
		        if (!db) {
		            alert("请打开数据库！");
		            return false;
		        }
		        var store = db.transaction("phone").objectStore("phone");
		        var keyRange = IDBKeyRange.lowerBound(0);
		        var cursorRequest = store.openCursor(keyRange);
		        cursorRequest.onsuccess = function(e) {
		            var result = e.target.result;
		            if (!!result == false)
		                return;
		            getOneObject(result.value);
		            result.continue();
		        };
		    }
		
		    function getOneObject(e) {
		        var ta = $("t1");
		        ta.innerHTML += e.name + "    ---    " + e.phone + "\n";
		    }
		
		    function DeleteInfo() {
		        var deletename = $("nam").value;
		        if (deletename != "") {
		            var t = db.transaction(["phone"], "readwrite");
		            var request = t.objectStore("phone").delete(deletename);
		            alert("删除成功！");
		            var txtAear = $("t1");
		            txtAear.innerHTML = "姓名          电话\n";
		            var store = db.transaction("phone").objectStore("phone");
		            var keyRange = IDBKeyRange.lowerBound(0);
		            var cursorRequest = store.openCursor(keyRange);
		            cursorRequest.onsuccess = function(e) {
		                var result = e.target.result;
		                if (!!result == false)
		                    return;
		                getOneObject(result.value);
		                result.continue();
		            };
		        } else {
		            alert("删除失败！");
		            $("nam").focus();
		        }
		
		    }
		
		    function ResetInfo() {
		        $("nam").value = "";
		        $("pnum").value = "";
		    }
		</script>
	</head>
	<body>
		<div id="d1">
		    <h3 class="hh">手机通讯录管理器</h3>
		    <fieldset name="myFie">
		        <legend>简易手机通讯录</legend>
		        姓名: <input type="text" name="" id="nam" required><br> 电话:
		        <input type="text" name="" id="pnum"><br><br>
		        <input type="button" onclick="AddInfo()" value="添加"></input>
		        <input type="button" onclick="FindInfo()" value="查询"></input>
		        <input type="button" onclick="DeleteInfo()" value="删除"></input>
		        <input type="button" value="重置" onclick="ResetInfo()"></input><br><br>
		        <textarea name="textarea1" id="t1" cols="30" rows="10">通讯录为空……</textarea>
		    </fieldset>
		    <p>前端工作室设计<br>版权所有&copy;,2017-2020</p>
		</div>
	</body>
</html>
